<template>
<div id="blue-module">
  <div class="msg">
    <span>
      <p>技术服务</p>
      <section>
        <p class="title">服务</p>
        <div class="container">
          <a :href="item.link" class="links" v-for="(item, index) in serve" :key="index">{{ item.font  }}</a>
        </div>
        <p class="title">技术</p>
        <div class="container">
          <a :href="item.link" class="links" v-for="(item, index) in serve" :key="index">{{ item.font  }}</a>
        </div>
      </section>

    </span>
    <span>
      <p>品牌业务</p>
      <section>
        <p class="title">解放号</p>
        <div class="container">
          <span class="links" v-for="(item, index) in ['关注解放号', 'APP下载']" :key="index">{{ item  }}</span>
        </div>
      </section>
      <section>
        <p class="title">CloudEasy</p>
        <div class="container">
          <span class="links">关注CloudEasy</span>
        </div>
      </section>
    </span>
    <span>
      <p>关注我们</p>
      <section>
        <p class="title">微信公众号</p>
      </section>
      <section>
        <p class="title">官方微博</p>
      </section>
    </span>
  </div>
</div>
</template>
<script setup lang="ts">

const serve = [
  {
    link: '',
    font: '云服务'
  },
  {
    link: '',
    font: '大数据'
  },
  {
    link: '',
    font: 'AI'
  },
  {
    link: '',
    font: '区块链'
  },
  {
    link: '',
    font: '云计算'
  },
  {
    link: '',
    font: '人工智能'
  },
  {
    link: '',
    font: '机器学习'
  },
  {
    link: '',
    font: '深度学习'
  },
  {
    link: '',
    font: '自然语言处理'
  }
]

</script>
<style scoped>
  #blue-module {
    height: 500px;
    background-color: rgb(0, 76, 163);
    padding: 20px;
  }
  .msg {
    width: 80%;
    height: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);


    >span {
        padding: 0 40px ;
        border-left: 1px solid rgba(144, 144, 144, 0.2);

        &:last-child {
          border-right: 1px solid rgba(144, 144, 144, 0.2);
        }

      >p {
        margin: 40px 0;
        font-size: 20px;
        color:aliceblue;
      }

      section {
        .title {
          position: relative;
          color: aliceblue;
          width: 80%;
          text-indent: 2em;

          &::after{
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            background-color: #fff;
            top: 50%;
            left: 10px;
            transform: translate(-50%, -50%);
          }
        }

        .container {
          display: flex;
          flex-wrap: wrap;
          margin: 20px 0 80px 0;
        }
        .links {
          font-size: 14px;
          color: aliceblue;
          &:not(:last-child):after{
            content: '|';
            margin: 10px;
          }
        }
      }
    }
  }

</style>
